<template>
  <div class="aside">
    <div class="box">
      <div class="title">今日热议主题</div>

      <div class="cell">
        <ul>
          <li v-for="(item, idx) in todayInfoData.todayList" :key="idx">
            <div class="subject">
              <el-image style="width: 18px; height: 18px" :src="getIcon(item.address)" fit="cover">
                <template #error>
                  <div>
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <el-link :underline="false" :href="item.address" target="_blank">{{item.title}}</el-link>
            </div>
            <div style="width:88%">
              <el-divider v-if="idx < todayInfoData.todayList.length - 1"></el-divider>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box">
      <div class="title">热词</div>
      <div class="cell first" style="color: #8590a6">
        <span>🍉🍅</span>
        <span>我金</span>
        <span>🍊</span>
        <span>土豆</span>
        <span v-for="(word, idx) in todayInfoData.todayWords" :key="idx">{{ word }}</span>
      </div>
    </div>

    <div class="box">
      <div class="title">运行状态</div>
      <div class="cell">
        <div>
          <span>今日新增资源数量：{{ todayInfoData.quantity }}</span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <span>浏览次数 {{ todayInfoData.visitorCount }}</span>
    <!-- <span class="dot"></span>
    <span>今日浏览次数 666</span> -->
    <!-- <span class="dot"></span> -->
    <br />
    <span>footer</span>
    <span class="dot"></span>
    <span>© 2022</span>
  </div>
</template>

<script setup>
import { todayInfo } from '@/api/resource.js'
import { reactive } from 'vue'

import { Picture as IconPicture } from '@element-plus/icons-vue'

import { getIcon } from '@/utils/timeFormat.js'

const todayInfoData = reactive({
  todayList: [],
  todayWords: [],
  visitorCount: 0,
  quantity: 0
})

const init = () => {
  todayInfo()
    .then((result) => {
      let { todayList, todayWords, visitorCount, quantity } = result
      todayInfoData.todayList = todayList
      todayInfoData.visitorCount = visitorCount
      todayInfoData.todayWords = todayWords
      todayInfoData.quantity = quantity
    })
    .catch((err) => {})
}

init()
</script>

<style scoped>
.aside .box:not(:first-child) {
  margin-top: 30px;
}
.aside div {
  background-color: #ffff;
}
.box {
  box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
}
.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  height: 20px;
  border-left: 3px solid #a0cfff;
}
.title {
  height: 45px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 45px;
  color: #191c22;
  padding: 0 20px;
  position: relative;
}

.cell {
  width: 100%;
}
.cell span {
  margin: 0 8px 0 5px;
}
.cell .subject {
  display: flex;
  margin: 10px 0 5px;
}
.first span::before {
  content: '#';
}
.first span:hover {
  color: black;
  cursor: pointer;
}
.el-divider {
  margin: 3px 0;
}
ul {
  margin-top: 0;
  padding: 0 0 10px 10px;
}
ul li {
  list-style: none;
}
li div {
  padding: 0 10px 0 10px;
}
.footer {
  margin-top: 20px;
}
.footer span {
  color: #8590a6;
}

.footer .dot::after {
  margin: 0 5px;
  content: '\B7';
}
</style>
